<template>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <div class="flex-container">
            <el-descriptions title="乘客行程信息" :column="2" v-for="site in souid" border>
                <el-descriptions-item label="编号" label-align="center" align="center">
                    <el-tag size="small">{{ site.passengerId }} </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="乘客姓名" label-align="center" align="center" label-class-name="my-label"
                    class-name="my-content" width="150px">{{ site.name }}</el-descriptions-item>
                <el-descriptions-item label="乘客状态" label-align="center" align="center">{{ site.status
                }}</el-descriptions-item>
                <el-descriptions-item label="价格" label-align="center" align="center">{{ site.price }}</el-descriptions-item>
                <el-descriptions-item label="开始时间" label-align="center" align="center">{{ site.startTime
                }}</el-descriptions-item>
                <el-descriptions-item label="路线" label-align="center" align="center">{{ site.route }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </el-drawer>
    <div class="table-container">
        <h1>乘客管理</h1>
        <el-table class="my-table" :data="currentPageData" :style="{ width: '100%', minHeight: GD001 + 'px' }">
            <el-table-column label="编号" prop="id" />
            <el-table-column label="乘客头像">
                <template v-slot="{ row }">
                    <el-image :src="row.photo" style="width: 50px; height: 50px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="乘客姓名" prop="name" />
            <el-table-column label="乘客注册时间" prop="registerTime" />
            <el-table-column label="乘客联系方式" prop="phone" />
            <!-- <el-table-column label="乘客状态" prop="passengerTrip.status" /> -->
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="请输入搜索内容" style="height: 30px" />
                </template>
                <template #default="scope">
                    <el-button size="small" type="primary" @click="drawer = true, handleEdit(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[4, 6, 8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="allData.length" />
</template>
<script  setup>
import { computed, ref } from 'vue'
import request from '../utils/request'
const search = ref('')

const souid = ref([])
const handleEdit = (row) => {
    request.get(`/manager/passenger2/${row.id}`)
        .then(result => {
            if (result.success) {
                souid.value = result.data // 请求成功后，将result.data赋值给allData
                souid.value.forEach(item => {
                    var date = new Date(item.startTime);
                    var formattedDate = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + "时" + date.getMinutes() + "分";
                    item.startTime = formattedDate;
                });
            }
        })
}
const drawer = ref(false)
const allData = ref([]) // 存储所有的数据
const currentPage = ref(1) // 当前页码
const pageSize = ref(6) // 每页的数据量

const currentPageData = computed(() => { // 计算当前页的数据
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return filteredData.value.slice(start, end)
})
const GD001 = ref(497)

const handleSizeChange = (val) => { // 处理每页数据量改变的事件

    pageSize.value = val
    GD001.value = val * 75 + 47
    currentPage.value = 1 // 每次改变每页数据量时，都将页码重置为1
}

const handleCurrentChange = (val) => { // 处理页码改变的事件
    currentPage.value = val
}

request.get("/manager/passenger").then(result => {
    if (result.success) {
        allData.value = result.data // 请求成功后，将result.data赋值给allData

        allData.value.forEach(item => {
            var date = new Date(item.registerTime);
            var formattedDate = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + "时" + date.getMinutes() + "分";
            item.registerTime = formattedDate;
        });
    }
})

// 添加一个计算属性来过滤数据
const filteredData = computed(() => {
    if (!search.value) {
        return allData.value;
    }
    return allData.value.filter((data) =>
        Object.values(data).some((value) =>
            String(value).toLowerCase().includes(search.value.toLowerCase())
        )
    );
});
</script>
<style>
.el-table .el-table__body tr {
    height: 75px;
    /* 你想要的行高 */
}
</style>
  